<script setup>
  import { useThemeStore, useUserStore } from '@/stores'
  const themeStore = useThemeStore()
  const userStore = useUserStore()
  themeStore.initTheme()
  function logout() {
    ElMessage.success('退出成功')
    userStore.removeToken()
  }
</script>

<template>
  <div class="header flex-between">
    <routerLink to="/"><img class="logo" src="@/assets/logo.png" /></routerLink>
    <div class="right flex-between">
      <div class="dark flex-between">
        <button
          class="dark-item flex-center"
          :class="{ active: themeStore.theme != 'dark' }"
          @click="themeStore.toggleThem()"
        >
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sunshine"></use>
          </svg>
        </button>
        <button
          class="dark-item flex-center"
          :class="{ active: themeStore.theme == 'dark' }"
          @click="themeStore.toggleThem()"
        >
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-moon"></use>
          </svg>
        </button>
      </div>
      <div class="avatar" v-if="userStore.token">
        <img src="@/assets/logo.png" />
        <div class="menu">
          <!-- <div class="menu-item">个人中心</div> -->
          <div class="menu-item" @click="logout">退出登录</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .header {
    user-select: none;
    height: 72px;
    padding: 25px;
    width: 100vw;
    max-width: 1768px;
    position: fixed;
    top: 0;
    z-index: 11;
    background: var(--color-background);

    .logo {
      width: 40px;
      height: 40px;
    }

    .dark {
      width: 65px;
      background: var(--color-active-background);
      padding: 2px 4px;
      border-radius: 999px;
      cursor: pointer;

      .dark-item {
        width: 24px;
        height: 24px;
        border-radius: 999px;
        background: transparent;
        color: var(--color-tertiary-label);

        .icon {
          width: 18px;
          height: 18px;
        }

        &.active {
          background: var(--elevation-low-background);
          box-shadow: var(--elevation-low-shadow);
          color: var(--color-primary-label);
        }
      }
    }

    .avatar {
      margin-left: 20px;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      position: relative;
      &:hover .menu {
        display: block;
      }
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
      .menu {
        display: none;
        position: absolute;
        top: 40px;
        right: 0;
        width: 100px;
        background: var(--color-background);
        border-radius: 8px;
        box-shadow: 1px 1px 15px 5px var(--color-border);
        .menu-item {
          padding: 8px 16px;
          font-size: 14px;
          font-weight: bold;
          color: var(--color-primary-label);
          cursor: pointer;
          border-radius: 8px;
          &:hover {
            background-color: var(--color-active-background);
          }
        }
      }
    }
  }
</style>
